<template>
  <div>
    <Echarts :data="OptionData" style="width: 500px; height: 300px"></Echarts>
  </div>
</template>

<script>

import Echarts from '@/components/ECharts/ECharts.vue'
import {mapState} from 'vuex'

export default {
  data() {
    return {

      echartsData:{},
      jishiqi:'',
      OptionData:{
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
        tooltip: {},
      },
    };
  },
  components: {
    Echarts,
  },

  computed:{
    ...mapState(['sessionId','FPGA'])

  },
  created(){
  },
  mounted(){
    if(!this.sessionId){
      setTimeout(()=>{
        this.sendMessage()
      },100)
    }else{
      this.sendMessage()
    }

    this.jishiqi = setInterval(()=>{
      this.getData()
    },1000)
  },
  beforeDestroy(){
    this.$http({
      method:'delete',
      url:'/resource/fpga',
      params:{
        sessionId:this.sessionId
      }
    })
    .then(res=>{
      console.log(res)
    })

    clearInterval(this.jishiqi)
  },
  methods:{
    sendMessage(){
      // var Id = this.sessionId
      console.log(this.sessionId);
      // var ID = parseInt(this.sessionId)
      this.$http({
        method:"get",
        url:'/resource/fpga',
        params:{
          sessionId:this.sessionId
        }
      })
    },
    getData(){
      this.echartsData = this.FPGA
      console.log(this.echartsData)
    }
  }
}

</script>

<style>
</style>